// 封装获取非行内样式
function getStyle(elem,attr){
    let style;
    // IE8-属性，高版本不能使用返回undefined
    if(elem.currentStyle){
        style = elem.currentStyle[attr]
    }else{
        style = window.getComputedStyle(elem)[attr];
    }
    return style
}

/* move(moveBox,'height',700);

// 1. 单属性运动函数封装
function move(elem,attr,target){
    
    // 获取运动属性的属性值
    let style = parseInt(getStyle(elem,attr));

    // 初始化速度
    let speed;
    
    // 定时器
    let timer = setInterval(()=>{
    
        // 速度、距离变化
        speed = Math.ceil((target - style) / 6);
        style += speed;
    
        // 达到目标值则停止定时器
        if(style === target){
            clearInterval(timer)
        }
        
        elem.style[attr] = style + 'px'
    },100);
} */

/* move(moveBox,{top:400,left:500});

// 2. 多属性运动函数封装
function move(elem,obj){

    // for-in遍历获取运动属性
    for(let key in obj){

        // 获取运动属性的属性值
        let style = parseInt(getStyle(elem,key));

        // 初始化速度
        let speed;
        
        // 定时器
        let timer = setInterval(()=>{
        
            // 速度、距离变化
            speed = Math.ceil((obj[key] - style) / 6);
            style += speed;
        
            // 达到目标值则停止定时器
            if(style === obj[key]){
                clearInterval(timer)
            }
            
            elem.style[key] = style + 'px'
        },100);
    }
} */


/* move(moveBox,{top:100,left:100,width:700},function(){
    moveBox.style.background = 'blue';
    moveBox.style.color = 'white'
    moveBox.innerText = '运动结束';
});

// 3. 多属性运动函数后续操作回调封装
function move(elem,obj,callback){
    // 设置定时器长度，记录定时器运行状况
    let setLength = 0;
    // for-in遍历获取运动属性
    for(let key in obj){
        // 由运动属性的多寡决定定时器长度
        setLength++;
        // 获取运动属性的属性值
        let style = parseInt(getStyle(elem,key));
        // 初始化速度
        let speed;
        // 定时器
        let timer = setInterval(()=>{
            // 速度、距离变化
            speed = Math.ceil((obj[key] - style) / 6);
            style += speed;
            // 达到目标值则停止定时器
            if(style === obj[key]){
                clearInterval(timer);
                // 定时器停止，则长度-1
                setLength--;
                // 长度为0时的回调操作
                if(setLength === 0){
                    // 短路表达式：若有回调参数则执行callback()，若无则不执行
                    callback && callback()
                }
            }
            elem.style[key] = style + 'px'
        },100);
    }
} */


/* btn.onclick = () => {
    move(moveBox,{left:600},function(){
        moveBox.style.background = 'blue';
        moveBox.style.color = 'white'
        moveBox.innerText = '运动结束';
    });
}

// 4. 事件驱动调用封装完善：多次点击定时器叠加导致速度加快
function move(elem,obj,callback){
    let setLength = 0;
    for(let key in obj){

        setLength++;
        let speed;

        // 每次触发定时器时，先清空定时器
        clearInterval(elem[key]);

        // 改为属性绑定定时器
        elem[key] = setInterval(()=>{

            // 每次执行定时器，获取最新的运动属性值
            let style = parseInt(getStyle(elem,key));
            speed = Math.ceil((obj[key] - style) / 6);
            style += speed;

            if(style === obj[key]){
                clearInterval(elem[key]);
                
                setLength--;
                if(setLength === 0){
                    callback && callback()
                }
            }
            elem.style[key] = style + 'px';
        },100);
    }
} */

// 5. 修改负值情况下无法完成位移问题、兼容透明度opacity
function move(elem,obj,callback){
    // 设置定时器长度
    let setLength = 0;
    // 遍历运动属性
    for(let key in obj){
        // 每遍历一次运动属性，定时器长度+1
        setLength++;
        // 初始化速度
        let speed;
        // 每次触发运动函数时，先清空定时器
        clearInterval(elem[key]);
        // 给运动属性绑定定时器
        elem[key] = setInterval(()=>{

            let style;

            // 2. 兼容透明度
            key == 'opacity'? style = getStyle(elem,key)*100:style = parseInt(getStyle(elem,key));

            // 1. 负值处理：正值向上取整，负值向下取值
            speed =  Math.ceil((obj[key] - style) / 6)||Math.floor((obj[key] - style) / 6);

            style += speed;    
            
            // 透明度属性与非透明度属性的属性值设置
            key === 'opacity'?elem.style[key] = style/100:elem.style[key] = style + 'px';

            // 达到目标值时停止定时器
            if(style === obj[key]){
                clearInterval(elem[key]);
                
                setLength--;
                // 保证定时器代码都执行完毕后，再执行回调函数
                if(setLength === 0){
                    callback && callback();
                }
            }
        },60);
    }
}




